<template>
    <div class = "list" ref="wrapper">
      <!-- 利用ref属性，可以获取到DOM元素或者是子组件，从而可以调用子组件方法
            注意：ref的属性命名不能用驼峰（即不能中间为大写字母） 例如wrapper 不能写成Wrapper -->
      <div>
        <div class = "area">
          <div class = "title border-topbottom">当前城市</div>
          <div class = "button-list">
            <div class = "button-wrapper">
              <div class = "button">{{this.currentCity}}</div>
            </div>
          </div>
        </div>
        <div class = "area">
          <div class = "title border-topbottom">热门城市</div>
          <div class = "button-list">
            <div class = "button-wrapper"
                 v-for = "item of hot"
                 :key = "item.id"
                 @click = "handleCityClick(item.name)"
            >
              <div class = "button">{{item.name}}</div>
            </div>
          </div>
        </div>
        <div class = "area"
             v-for = "(item, key) of cities"
             :key = "key"
             :ref = "key"
        >
            <div class = "title border-topbottom">{{key}}</div>
            <div class = "item-list"
                 v-for = "innerItem of item"
                 :key = "innerItem.id"
                 @click = "handleCityClick(innerItem.name)">
                 <!-- 外层级的key值与子层级的key值重复是没有关系的，不会有影响。但同一层级的key值不能重复 -->
                <div class = "item border-bottom">{{innerItem.name}}</div>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'
// better-scroll 用来实现滚动
export default {
  name: 'CityList',
  props: {
    hot: Array,
    cities: Object,
    letter: String
  },
  computed: {
    ...mapState({
      currentCity: 'city'
    })
  },
  methods: {
    handleCityClick (city) {
      // this.$store.commit('changeCity', city)
      // 通过commit方法调用mutations中的changeCity方法
      this.changeCity(city)
      this.$router.push('/')
      // 跳转到首页面
    },
    ...mapMutations(['changeCity'])
  },
  // watch 侦听器
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        // console.log(element)
        this.scroll.scrollToElement(element)
      }
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
.border-topbottom
  &:before
    border-color #ccc
  &:after
    border-color #ccc
.border-bottom
  &:before
    border-color #ccc
.list
  overflow hidden
  position absolute
  top 80px
  left 0
  right 0
  bottom 0
  .title
    line-height 27px
    background #eee
    padding-left 10px
    color #666
    font-size 13px
  .button-list
    overflow hidden/* 为什么去掉ul去掉overflow: hidden之后没在了, 其实不是没在了, 看到由于没有设置高度, height: auto为自动值, 就是根据里面的内容自动设置高度, 但是li设置了左浮动, 已经浮动起来了属于浮动流, 不在普通流中, 但是ul还是在普通流, 他普通流中的内容为空, 所以没有高度.  */
    /*  那么如果 float 的元素li不占普通流位置,
普通流的包含块ul设置了overflow: hidden要根据内容高度裁切隐藏,
并且ul高度是默认值auto, 那么不计算其内浮动元素高度就裁切就有可能会裁掉float的li
 这是反布局常识的。所以如果没有明确设定容器ul高情况下
它要计算内容全部高度才能确定在什么位置hidden
浮动流的高度就要被计算进去,就是li的高度, 一计算进去就顺带达成了清理浮动的目标*/
    padding 10px 10px 5px 5px
    .button-wrapper
      float left
      width 30%
      .button
        margin 5px
        padding 4px 0
        text-align center
        border 1px solid #ccc
        border-radius 3px
  .item-list
    .item
      line-height 27px
      padding-left 10px
</style>
